<!DOCTYPE html>
<html lang="en" xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新slof</title>
    <script src="../../vue2.js"></script></head>
<body>
<div id="box">
    <child>
        <template v-slot:a>
            <div>11111111111</div>
        </template>

        <template #b>   <!-- 缩写 -->
            <div>2222222222</div>
        </template>

        <template #default>   <!-- 未命名的slot，用default指定 -->
            <div>44444444444</div>
        </template>

    </child>

    <navbar>
        <template #left>
            <button>left</button>
        </template>

        <template #right>
            <i class="iconfont icon-all" slot="right">字体图标</i>
        </template>

    </navbar>
</div>
<script>
    //插槽的意义：扩展组件能力，提高组件的复用性
    Vue.component("navbar",{
        template: `<div>
            <slot name="left"></slot>
            <span>navbar</span>
            <slot name="right"></slot>
        </div>`
    })


    // 单个插槽， <slot></slot>
    // 具有名字的插槽， <slot name="a"></slot>

    Vue.component("child",{
        template:`<div>
            child
            <slot name="a"></slot>
            <slot name="b"></slot>
            <slot></slot>
        </div>`
    })
    new Vue({
        el:"#box",
    })
</script>
</body>
</html>